<template>
  <div>
    <el-input
      style="width: 200px; margin-left: 20px"
      v-model="state.searchData.username"
      @input="changeSearch"
      clearable
      :prefix-icon="User"
      placeholder="请输入用户名"
    />
    <el-input
      style="width: 200px; margin-left: 20px"
      v-model="state.searchData.phone"
      @input="changeSearch"
      clearable
      :prefix-icon="User"
      placeholder="请输入手机"
    />
    <el-input
      style="width: 200px; margin-left: 20px"
      v-model="state.searchData.email"
      @input="changeSearch"
      clearable
      :prefix-icon="User"
      placeholder="请输入邮箱"
    />
  </div>
  <div v-if="state.tableData.length > 0">
    <el-table
      :data="state.tableData"
      style="width: 100%;margin-top: 20px;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="id" label="ID" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button link type="danger" @click="showDeletePopover(scope.row.id)"
            >删除</el-button
          >
          <el-button link type="primary" @click="goDetail(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block mt-3">
      <el-pagination
        v-model:current-page="state.searchData.page"
        v-model:page-size="state.searchData.limit"
        :page-sizes="
          state.searchData.total <= 40
            ? [10, 20, 30, 40]
            : [10, 20, 30, 40, state.searchData.total]
        "
        :disabled="false"
        :background="true"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="state.searchData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <div v-if="state.tableData == ''">
    <el-empty description="暂无相关数据" />
  </div>
  <el-dialog  v-model="updataDialogVisible" title="修改用户信息"  style="width: 600px">
    <el-form label-width="100px"  style="width: 460px" v-if="state.oneCustomerInfo&&state.oneCustomerInfo.id">
      <el-form-item label="ID">
        <el-input disabled  v-model="state.oneCustomerInfo.id"/>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input disabled v-model="state.oneCustomerInfo.username"/>
      </el-form-item>
   
      <el-form-item label="手机号">
        <el-input  v-model="state.oneCustomerInfo.phone" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input  v-model="state.oneCustomerInfo.email" />
      </el-form-item>
      <el-form-item label="" class="text-center">
       <el-button @click="confirmUpdata(state.oneCustomerInfo.id)" type="success" style="width: 100%;">保存修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, markRaw } from "vue";
import { Edit, User, Delete, UploadFilled } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import router from "../../router";
import request from "../../api/request";
import * as echarts from "echarts";
import axios from "axios";
const state = reactive({
  tableData: [],
  searchData: {
    page: 1,
    limit: 10,
    total: 0,
    username: "",
    phone: "",
    email: "",
  },
  oneCustomerInfo: {}
});
const main = ref();
onMounted(() => {
  initData();
});
const multipleSelection = ref([]);
const isShowDeletaBatchBtn = ref(true);
const importDataDialogVisible = ref(false);
const updataDialogVisible = ref(false);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  if (multipleSelection._rawValue.length) {
    isShowDeletaBatchBtn.value = false;
  } else {
    isShowDeletaBatchBtn.value = true;
  }
};

const initData = () => {
  let authentication = localStorage.getItem("adminInfo");
  if (!(authentication == 2)) {
    router.push("/admin/login");
    return;
  }
  request.post("/customer/list", state.searchData).then((res) => {
    if (res.code == 200) {
      state.tableData = res.data.records;
      state.searchData.total = res.data.total;
       ElMessage({
          type: "success",
          message: res.msg,
        });
    }
  });
};

const handleCurrentChange = (page) => {
  state.searchData.page = page;
  initData();
};
const showDeletePopover = (id) => {
  ElMessageBox.confirm(`您确定删除id为${id}的数据吗`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(() => {
      request.post("/customer/remove",id).then((res) => {
        // ElMessage({
        //   type: "success",
        //   message: res.msg,
        // });
        if (res.code == 200) {
          initData();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
const goDetail = (id) => {
  request.get("/customer/getOneCustomer?id="+id).then((res)=>{
    state.oneCustomerInfo = res.data
  })
  updataDialogVisible.value = true;
};
const confirmUpdata = () => {
  request.post("/customer/update", state.oneCustomerInfo).then((res)=>{
    updataDialogVisible.value = false;
    initData();
  })

};
const handleSizeChange = (limit) => {
  state.searchData.limit = limit;
  initData();
};
const changeSearch = (val) => {
  initData();
};
</script>
